<template>
	<view class="container">
		<view class="item" v-for="(item,index) in category" :key='item._id'>
			<navigator class="item" :url="index!=9?'/pages/search/search':item.navigator_url">
				<image :src="item.image_src"></image>
				<text>{{item.name}}</text>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'homeItem',
		data() {
			return { category: [] }
		},
		methods: {
			getCategory() {
				this.$api.home.getCategory().then(res => {
					this.category = res.message
					// console.log(res.message);
				})
			}

		},
		created() {
			this.getCategory()
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		.item {
			margin-top: 10rpx;
			width: 120rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			image {
				width: 70rpx;
				height: 70rpx;
			}
		}
	}
</style>
